<template>
  <div class="chain-container">
    <EditableContent ref="editable" v-model="content" placeholder="识别内容" />
    <!-- 循环展示思维链组 -->
    <div v-for="(group, index) in chainGroups" :key="index" class="chain-group">
      <!-- 组标题 -->
      <div class="group-title">{{ group.title }}</div>

      <!-- 组内容分段 -->
      <div
        v-for="(segment, segIndex) in group.segments"
        :key="segIndex"
        class="segment"
      >
        <!-- 内容容器 -->
        <div
          class="content-wrapper"
          :class="{ collapsed: segment.collapsed }"
          @click="toggleCollapse(segment)"
        >
          {{ segment.content }}
        </div>

        <!-- 展开/折叠按钮 -->
        <div
          v-if="needsCollapse(segment)"
          class="collapse-btn"
          @click.stop="toggleCollapse(segment)"
        >
          <a-button
            v-if="segment.collapsed"
            type="text"
            title="展开"
            size="small"
          >
            <template #icon>
              <CaretDownOutlined />
            </template>
          </a-button>
          <a-button v-else type="text" title="展开" size="small">
            <template #icon>
              <CaretUpOutlined />
            </template>
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
  import { ref, defineAsyncComponent } from 'vue';

  const EditableContent = defineAsyncComponent(
    () => import('@/components/EditableArea.vue'),
  );
  const content = ref('132');
  const editable = ref(null);

  // 初始化数据时添加折叠状态
  const chainGroups = ref([
    {
      title: '问题分析',
      segments: [
        {
          content: '明确用户的核心需求',
          collapsed: false,
        },
        {
          content: '识别潜在的技术约束',
          collapsed: false,
        },
        {
          content: '评估可行性方案',
          collapsed: false,
        },
      ],
    },
    {
      title: '解决方案',
      segments: [
        {
          content:
            '故事线梳理:最终报告要回答的问题是【查找最近北京人形机器人马拉松相关的股票，并对这些股票进行分析】--基于前序分析、数据梳理整个报告维导图呈现论点的逻辑展开关系故事线梳理:最终报告要回答的问题是【查找最近北京人形机器人马拉松相关的股票，并对这些股票进行分析】--基于前序分析、数据梳理整个报告维导图呈现论点的逻辑展开关系故事线梳理:最终报告要回答的问题是【查找最近北京人形机器人马拉松相关的股票，并对这些股票进行分析】--基于前序分析、数据梳理整个报告维导图呈现论点的逻辑展开关系',
          collapsed: true,
        },
        {
          content: '使用Pinia进行状态管理',
          collapsed: false,
        },
        {
          content: '响应式布局设计',
          collapsed: false,
        },
      ],
    },
  ]);

  // 判断是否需要折叠功能
  const needsCollapse = (segment) => {
    return segment.content.length > 50;
  };

  // 切换折叠状态
  const toggleCollapse = (segment) => {
    if (needsCollapse(segment)) {
      segment.collapsed = !segment.collapsed;
    }
  };
</script>

<style scoped>
  .chain-container {
    padding: 16px;
    max-width: 800px;
    margin: 0 auto;
  }

  .group-title {
    color: #999;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    margin-bottom: 12px;
  }

  .segment {
    padding: 8px 12px 8px 12px; /* 增加右侧padding */
    margin-bottom: 8px;
    background: #f8f8f8;
    border-radius: 4px;
    transition: all 0.2s;
    position: relative;
    padding-right: 30px; /* 新增：为按钮预留空间 */
  }

  .segment:hover {
    background: #f0f0f0;
  }

  .content-wrapper {
    cursor: pointer;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: none;
    transition: max-height 0.3s ease;
    padding-right: 10px; /* 新增：内容与按钮间距 */
  }

  .collapse-btn {
    position: absolute;
    right: 12px;
    bottom: 8px;
    /* 提高背景透明度 */
    /* background: rgba(255, 255, 255, 0.9);  */
    /* 增大按钮面积 */
    /* padding: 2px 8px;  */
    /* 圆形按钮 */
    /* border-radius: 12px;  */
    color: #666;
    font-size: 12px;
    cursor: pointer;
    /* 添加轻微阴影 */
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);  */
    z-index: 1; /* 确保按钮在最上层 */
  }

  .content-wrapper.collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .collapse-btn:hover {
    color: #333;
  }
</style>
